<template>
        <el-container class=" st-height-100-pc st-width-100-pc">
            <el-header class="st-height-100-pc st-padding-0" :style="headerStyle">
                <slot name="header"></slot>
            </el-header>
            <el-main class="st-height-100-pc st-padding-0">
                <el-container class="st-height-100-pc">
                    <el-aside :width="asideWidth" :style="asideStyle" class="st-height-100-pc">
                        <el-scrollbar  class="st-height-100-pc st-el-scroll-vertical">
                            <StElMenu :style="'width:' + asideWidth" :datas="menuDatas" :origin-prop="originMenuProp"></StElMenu>
                        </el-scrollbar>
                    </el-aside>
                    <el-main>
                        <keep-alive>
                            <router-view   v-if="$route.meta.keepAlive === true"></router-view>
                        </keep-alive>
                        <router-view v-if="$route.meta.keepAlive !== true"></router-view>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>

</template>

<script>
    export default {
        name: "StElBackedIndex",
        props: {
            menuDatas: [String,Array],
            originMenuProp:{
                type: Object,
                default: function () {
                    return {}
                }
            },
            asideWidth: {
                type: String,
                default: '200px'
            },
            asideStyle: String,
            headerStyle: String
        },
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>

</style>